<template>
  <view style="margin-top: 6.25rem; margin-right: 1.5625rem; margin-left: 1.875rem">
    <nut-form :model-value="userFrom" ref="userFromRules">
      <nut-form-item
        label="账号"
        prop="account"
        required
        :rules="[{ required: true, message: '请填写账号' }]"
      >
        <input
          @blur="accountBlurValidate('account')"
          v-model="userFrom.account"
          class="nut-input-text"
          placeholder="请输入账号"
          type="text"
        />
      </nut-form-item>
      <nut-form-item
        label="密码"
        prop="password"
        required
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <input
          @blur="passwordBlurValidate('password')"
          v-model="userFrom.password"
          class="nut-input-text"
          placeholder="请输入密码"
          type="password"
        />
      </nut-form-item>
    </nut-form>
  </view>
  <view class="mt-5 d-flex jc-center " @tap="login">
    <nut-button type="primary" class="lg-btn">登录</nut-button>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { postAdminLogin, getStoreBelongList } from '../../services/apis/user'
import md5 from 'blueimp-md5'
import Taro from '@tarojs/taro'
import { useStore } from '@/stores'

const auth = useStore('auth')

// const userInfo = computed(() => auth.userInfo)

const userFrom = ref({
  account: '17390052571',
  password: '123456'
})
const userFromRules = ref<any>(null)

const accountBlurValidate = (prop: string) => {
  userFromRules.value.validate(prop).then(({ valid, errors }: any) => {
    if (valid) {
      // console.log('success', userFrom)
    } else {
      console.log('error submit!!', errors)
    }
  })
}
const passwordBlurValidate = (prop: string) => {
  userFromRules.value.validate(prop).then(({ valid, errors }: any) => {
    if (valid) {
      // console.log('success', userFrom)
    } else {
      console.log('error submit!!', errors)
    }
  })
}

const login = () => {
  userFromRules.value.validate().then(async ({ valid, errors }: any) => {
    if (valid) {
      console.log(userFrom.value, 'userFrom')
      const params = {
        account: userFrom.value.account,
        password: md5(userFrom.value.password)
      }
      // console.log(params)
      const { data } = await postAdminLogin(params)
      Taro.setStorageSync('token', data.token)
      auth.setUserInfo({
        avatar: data.avatar,
        name: data.name,
        token: data.token
      })

      const res = await getStoreBelongList()
      console.log(res.data.list[0].id, 'res.data.list')
      auth.setStore(res.data.list)
      auth.setStoreId(res.data.list[0].id)
      Taro.setStorageSync('storeID', res.data.list[0].id)

      Taro.showToast({
        title: '登录成功',
        icon: 'none',
        duration: 1000
      })
      Taro.navigateTo({ url: '/pages/home/index' })
    } else {
      console.log('error submit!!', errors)
    }
  })
}
</script>

<style lang="scss">
.lg-btn {
  width: 70%;
}
</style>
